<!-- 添加安全评价报告页面 -->
<template>
    <div>
        <!-- 项目概况 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>项目概况</span>
                </div>
            </div>
            <div class="tableCss">
                <el-form ref="ruleForm" :model="evaluate" label-width="100px" :rules="rules">
                    <el-form-item label="项目名称" prop="projectName">
                        <el-input v-model="evaluate.projectName" placeholder="请输入项目名称" clearable />
                    </el-form-item>
                    <el-form-item label="项目地址" prop="projectAddress">
                        <el-input v-model="evaluate.projectAddress" placeholder="请输入项目地址" clearable />
                    </el-form-item>
                    <el-form-item label="所属行业" prop="projectIndustry">
                        <el-input v-model="evaluate.projectIndustry" placeholder="请输入所属行业" clearable />
                    </el-form-item>
                    <el-form-item label="评价类型" prop="evaluateType">
                        <el-input v-model="evaluate.evaluateType" placeholder="请输入评价类型" clearable />
                    </el-form-item>
                    <el-form-item label="项目简介" prop="projectDesc">
                        <el-input v-model="evaluate.projectDesc" placeholder="请输入项目简介" clearable />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 评价机构情况 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>评价机构情况</span>
                </div>
            </div>
            <div class="tableCss">
                <el-form ref="ruleForm" :model="evaluate" label-width="130px" :rules="rules">
                    <el-form-item label="评价机构" prop="evaluateAgent">
                        <el-input v-model="evaluate.evaluateAgent" placeholder="请输入评价机构" clearable />
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="机构资质证书号" prop="agentQualifiCertificate">
                                <el-input v-model=" evaluate.agentQualifiCertificate" placeholder="请输入机构资质证书号" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="资质有效期" prop="qualifiCertificateEffectTime">
                                <el-date-picker v-model="evaluate.qualifiCertificateEffectTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="技术负责人" prop="techCharger">
                                <el-input v-model="evaluate.techCharger" placeholder="请输入技术负责人" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="过程控制负责人" prop="processControl">
                                <el-input v-model="evaluate.processControl" placeholder="请输入过程控制负责人" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="报告编制人" prop="reporter">
                                <el-input v-model="evaluate.reporter" placeholder="请输入报告编制人" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="报告审核人" prop="reportExamine">
                                <el-input v-model="evaluate.reportExamine" placeholder="请输入报告审核人" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <!-- 项目组情况 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>项目组情况</span>
                    <span><el-button style="margin-left: 10px;" type="success" plain icon="el-icon-plus" size="mini" @click="addTeamInfo">添加</el-button></span>
                </div>
            </div>
            <div style="padding: 5px;">
                <el-table border stripe :data="Members.data" style="width: 70%; margin-left: 40px; padding-bottom: 15px;">
                    <el-table-column type="index" />
                    <el-table-column v-for="(v, i) in Members.columns" :key="i" align="center" :prop="v.field" :label="v.title" :width="v.width">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isSet">
                                <el-select v-if="v.field === 'peopleAttribute'" v-model="Members.sel[v.field]">
                                    <el-option v-for="item in memberType" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                                <el-input v-else v-model="Members.sel[v.field]" clearable />
                            </span>
                            <span v-else>{{ scope.row[v.field] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button class="el-button el-button--warning el-button--small" style="cursor: pointer;" @click="pwdChange(scope.row, scope.$index, true)">
                                {{ scope.row.isSet? '保存': '修改' }}
                            </el-button>
                            <el-button v-if="!scope.row.isSet" class="el-button el-button--danger el-button--small" style="cursor: pointer;" @click="showDeleteDialog(scope.$index)">
                                删除
                            </el-button>
                            <el-button v-else class="el-button el-button--primary  el-button--small" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                                取消
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 评价现场 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>评价现场</span>
                </div>
            </div>
            <div class="tableCss">
                <el-form ref="ruleForm" :model="evaluate" label-width="120px" :rules="rules">
                    <el-form-item label="现场勘验人员" prop="siteInspectionCharger">
                        <el-input v-model="evaluate.siteInspectionCharger" placeholder="请输入现场勘验人员" />
                    </el-form-item>
                    <el-form-item label="现场勘验时间" prop="siteInspectionTime">
                        <el-date-picker v-model="evaluate.siteInspectionTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" clearable />
                    </el-form-item>
                    <el-form-item label="评价结论" prop="evaluateConclusion">
                        <el-input v-model="evaluate.evaluateConclusion" placeholder="请输入评价结论" />
                    </el-form-item>
                    <!--                    <el-form-item label="现场勘验图像" prop="evaluateConclusion">-->
                    <!--                        <ImagesUpload />-->
                    <!--                    </el-form-item>-->
                </el-form>
            </div>
        </div>
        <!-- 审批结果 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>审批结果</span>
                </div>
            </div>
            <div class="tableCss">
                <el-form ref="ruleForm" :model="evaluate" label-width="120px" :rules="rules">
                    <el-form-item label="审批部门" prop="apporvalDept">
                        <el-input v-model="evaluate.apporvalDept" placeholder="请输入审批部门" />
                    </el-form-item>
                    <el-form-item label="审批通过时间" prop="approvalTime">
                        <el-date-picker v-model="evaluate.approvalTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" clearable />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div style="text-align: center;">
            <el-button type="primary" @click="submit">确 认 提 交</el-button>
            <div style="margin-left: 15px; display: inline-block;">
                <router-link :to="{name: 'SafetyAssessmentReportInformationIndex'}">
                    <el-button plain type="primary">取 消</el-button>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
// id生成工具 这个不用看 示例而已 模拟后台返回的id
var generateId = {
    _count: 1,
    get() {
        return ((+new Date()) + '_' + (this._count++))
    }
}
export default {
    name: 'AddSafeAssessReport',
    data() {
        return {
            evaluate: {},
            Members: {
                sel: null,
                columns: [
                    {field: 'peopleName', title: '成员姓名', width: 130},
                    {field: 'vocaQualifiNum', title: '职业资格证书号'},
                    {field: 'peopleMajor', title: '专业', width: 220},
                    {field: 'peopleAttribute', title: '成员类型', width: 140}
                ],
                data: []
            },
            memberType: [{
                value: '组长',
                label: '组长'
            }, {
                value: '组员',
                label: '组员'
            }],
            rules: {
                projectName: [
                    { required: true, trigger: 'blur', message: '请输入项目名称' }
                ],
                projectAddress: [
                    { required: true, trigger: 'blur', message: '请输入项目地址' }
                ],
                projectIndustry: [
                    { required: true, trigger: 'blur', message: '请输入项目所属行业' }
                ],
                evaluateType: [
                    { required: true, trigger: 'blur', message: '请输入评价类型' }
                ],
                projectDesc: [
                    { required: true, trigger: 'blur', message: '请输入项目简介' }
                ],
                evaluateAgent: [
                    { required: true, trigger: 'blur', message: '请输入评价机构' }
                ],
                agentQualifiCertificate: [
                    { required: true, trigger: 'blur', message: '请输入机构资质证书号' }
                ],
                qualifiCertificateEffectTime: [
                    { required: true, trigger: 'change', message: '请输入资质有效期' }
                ],
                techCharger: [
                    { required: true, trigger: 'blur', message: '请输入技术负责人' }
                ],
                processControl: [
                    { required: true, trigger: 'blur', message: '请输入过程控制负责人' }
                ],
                reporter: [
                    { required: true, trigger: 'blur', message: '请输入报告编制人' }
                ],
                reportExamine: [
                    { required: true, trigger: 'blur', message: '请输入报告审核人' }
                ],
                siteInspectionCharger: [
                    { required: true, trigger: 'blur', message: '请输入现场勘验人员' }
                ],
                siteInspectionTime: [
                    { required: true, trigger: 'change', message: '请选择勘验时间' }
                ],
                evaluateConclusion: [
                    { required: true, trigger: 'blur', message: '请输入评价结论' }
                ],
                apporvalDept: [
                    { required: true, trigger: 'blur', message: '请输入审批部门' }
                ],
                approvalTime: [
                    { required: true, trigger: 'change', message: '请选择审批时间' }
                ]
            }
        }
    },
    methods: {
        readMembers() { // 读取表格数据
            // 根据实际情况，自己改下啊
            this.Members.data.map(i => {
                i.id = generateId.get() // 模拟后台插入成功后有了id
                i.isSet = false // 给后台返回数据添加`isSet`标识
                return i
            })
        },
        pwdChange(row, index, cg) { // 修改
            for (let i of this.Members.data) { // 点击修改 判断是否已经保存所有操作
                if (i.isSet && i.id !== row.id) {
                    this.$message.warning('请先保存当前编辑项')
                    return false
                }
            }
            if (!cg) { // 是否是取消操作
                if (!this.Members.sel.id) this.Members.data.splice(index, 1)
                return row.isSet = !row.isSet
            }
            if (row.isSet) { // 提交数据
                // 项目是模拟请求操作  自己修改下
                let data = JSON.parse(JSON.stringify(this.Members.sel))
                for (let k in data)  row[k] = data[k]
                this.$message({
                    type: 'success',
                    message: '保存成功!'
                })
                // 然后这边重新读取表格数据
                this.readMembers()
                row.isSet = false
            } else {
                this.Members.sel = JSON.parse(JSON.stringify(row))
                row.isSet = true
            }
        },
        showDeleteDialog(index) { // 删除添加表格里面的一行数据
            this.Members.data.splice(index, 1)
            this.$message({
                type: 'success',
                message: '删除成功!'
            })
        },
        addTeamInfo() { // 添加项目组成员
            for (let i of this.Members.data) {
                if (i.isSet) return this.$message.warning('请先保存当前编辑项')
            }
            let j = {
                id: 0,
                'peopleName': '',
                'vocaQualifiNum': '',
                'peopleMajor': '',
                'peopleAttribute': '',
                'isSet': true
            }
            this.Members.data.push(j)
            this.Members.sel = JSON.parse(JSON.stringify(j))
        },
        submit() {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    var param = {}
                    param = Object.assign(param, this.evaluate)
                    var list = []
                    list = Object.assign(list, this.Members.data)
                    for (let i = 0; i < list.length; i++) {
                        list[i].id = null
                        list[i].isSet = null
                    }
                    setTimeout(() => {
                        param.safeAssessTeamList = list
                        this.postRequest('/system/safeAssessReport/addSafeAssessReport', param).then(resp => {
                            if (resp) {
                                this.$message({
                                    type: 'success',
                                    message: '提交成功!'
                                })
                                this.$router.push({path: '/safety_assessment_report_information/index'})
                            }
                        })
                    }, 200)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.basic {
    margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 15px;
}
.tableCss {
    padding: 5px;
    margin-left: 10px;
    .el-input {
        width: 300px;
    }
}
.title {
    margin-left: 20px;
    color: #337ab7;
}
</style>
